<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <title>Compass Example</title> 
 
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
 
    // The watch id references the current `watchHeading` 
    var watchID = null; 
 
    // Wait for PhoneGap to load 
    // 
    function onLoad() { 
        document.addEventListener("deviceready", onDeviceReady, false); 
    } 
 
    // PhoneGap is ready 
    // 
    function onDeviceReady() { 
        startWatch(); 
    } 
 
    // Start watching the compass 
    // 
    function startWatch() { 
 
        // Update compass every 0.1 seconds 
        var options = { frequency: 100 }; 
 
        watchID = navigator.compass.watchHeading(onSuccess, onError, options); 
    } 
 
    // Stop watching the compass 
    // 
    function stopWatch() { 
        if (watchID) { 
            navigator.compass.clearWatch(watchID); 
            watchID = null; 
        } 
    } 
 
    // onSuccess: Get the current heading 
    // 
    function onSuccess(heading) { 
        var element = document.getElementById('heading'); 
        element.innerHTML = 'Heading: ' + heading; 
    } 
 
    // onError: Failed to get the heading 
    // 
    function onError() { 
        alert('onError!'); 
    } 
 
    </script> 
  </head> 
  <body onload="onLoad()"> 
    <div id="heading">Waiting for heading...</div> 
    <button onclick="startWatch();">Start Watching</button> 
    <button onclick="stopWatch();">Stop Watching</button> 
  </body> 
</html> 
